import React, { useEffect, useState } from 'react'
import styles from '../css分支/Main.module.css'
import { Arrow, ChatO, Circle } from '@react-vant/icons';
import { Grid, Image } from 'react-vant'
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import {http} from '../../../utils'
export default function Main() {
    const navigate = useNavigate()
    const [list, setlist] = useState({})
    const getList = async () => {
        let res = await axios.get('http://localhost:3000/xzx/business')
        setlist(res.data.data)
    }
    useEffect(() => {
        getList()
    }, [])
    return (
        <div style={{ backgroundColor: 'rgb(240,240,240)', height: '100vh' }} >
            <div>
                <div className={styles.head}>
                    <div className={styles.head1}>
                        <div className={styles.head_fen}>
                            {/* 跳转到消息页面 */}
                            <ChatO style={{ fontSize: '0.3rem', color: 'white' }} onClick={() => { navigate('/page') }}/>
                            <p style={{ fontSize: '0.25rem', color: 'white' }}>首页</p>
                            {
                                list.status?<div className={styles.head_fen1}><Circle style={{ fontSize: '0.1rem', backgroundColor: 'green', borderRadius: '50%' }} />
                                <span style={{ color: 'white' }} onClick={() => { navigate('/status') }}>营业中</span>
                                </div>
                                :<div className={styles.head_fen1}><Circle style={{ fontSize: '0.1rem', backgroundColor: 'gray', borderRadius: '50%' }} />
                                    <span style={{ color: 'white' }} onClick={() => { navigate('/status') }}>休息中</span>
                                </div>
                            }

                        </div>
                    </div>
                    <div className={styles.head2} onClick={()=>navigate('/xinxi')}>
                        <img src="/imgs/touxiang.png" alt="" style={{ width: '0.6rem', height: '0.6rem', borderRadius: '50%' }} />
                        <p style={{ color: 'white', marginRight: '1rem' }}>默林石墨肠粉早餐店
                            <br />
                            (凤凰广场店)
                            <br />查看店铺信息
                        </p>
                        <Arrow style={{ color: 'white' }} />
                    </div>

                </div>
                <div className="mains">
                    <div className={styles.body1}>
                        <div className={styles.body_fen} onClick={() => { navigate('/shop') }}>
                            <img src="/imgs/1.png" alt="" style={{ width: '0.5rem', height: '0.5rem', borderRadius: '50%', marginTop: '0.2rem' }} />
                            <p>商品管理</p>
                        </div>
                        <div className={styles.body_fen} onClick={() => { navigate('/tuangou') }}>
                            <img src="/imgs/2.png" alt="" style={{ width: '0.5rem', height: '0.5rem', borderRadius: '50%', marginTop: '0.2rem' }} />
                            <p>团购管理</p>
                        </div>
                        <div className={styles.body_fen} onClick={() => { navigate('/money') }}>
                            <img src="/imgs/3.png" alt="" style={{ width: '0.5rem', height: '0.5rem', borderRadius: '50%', marginTop: '0.2rem' }} />
                            <p>财务管理</p>
                        </div>
                        <div className={styles.body_fen} onClick={() => { navigate('/pingjia') }}>
                            <img src="/imgs/4.png" alt="" style={{ width: '0.5rem', height: '0.5rem', borderRadius: '50%', marginTop: '0.2rem' }} />
                            <p>评价管理</p>
                        </div>
                    </div>
                    <div className={styles.body2}>
                        <div className={styles.body2_fen1}>
                            <p>经营数据</p>
                            <p>更多<Arrow style={{ color: 'gray' }} /></p>
                        </div>
                        <div className={styles.body2_fen2}>
                            <Grid border={false} columnNum={3} >
                                <Grid.Item>
                                    <p style={{ fontSize: '0.22rem', color: 'red' }}>199</p>
                                    <br />
                                    <p style={{ fontSize: '0.15rem', color: 'rgb(183, 183, 183)' }}>今日订单量</p>
                                </Grid.Item>
                                <Grid.Item>
                                    <p style={{ fontSize: '0.22rem', color: 'red' }}>4000.01</p>
                                    <br />
                                    <p style={{ fontSize: '0.15rem', color: 'rgb(183, 183, 183)' }}>今日营业额</p>
                                </Grid.Item>
                                <Grid.Item>
                                    <p style={{ fontSize: '0.22rem', color: 'red' }}>20.10</p>
                                    <br />
                                    <p style={{ fontSize: '0.15rem', color: 'rgb(183, 183, 183)' }}>今日客单价</p>
                                </Grid.Item>
                                <Grid.Item>
                                    <p style={{ fontSize: '0.22rem' }}>201</p>
                                    <br />
                                    <p style={{ fontSize: '0.15rem', color: 'rgb(183, 183, 183)' }}>昨日订单量</p>
                                </Grid.Item>
                                <Grid.Item>
                                    <p style={{ fontSize: '0.22rem' }}>4508.71</p>
                                    <br />
                                    <p style={{ fontSize: '0.15rem', color: 'rgb(183, 183, 183)' }}>昨日营业额</p>
                                </Grid.Item>
                                <Grid.Item>
                                    <p style={{ fontSize: '0.22rem' }}>22.43</p>
                                    <br />
                                    <p style={{ fontSize: '0.15rem', color: 'rgb(183, 183, 183)' }}>昨日客单价</p>
                                </Grid.Item>
                            </Grid>
                        </div>
                    </div>
                    <div className={styles.foot}>
                        <div className={styles.body2_fen1}>
                            <p>营销活动</p>
                            <p></p>
                        </div>
                        <div className={styles.body2_fen2}>
                            <Grid border={false} columnNum={3} >
                                <Grid.Item>
                                    <p style={{ fontSize: '0.22rem' }}>20</p>
                                    <br />
                                    <p style={{ fontSize: '0.15rem', color: 'rgb(183, 183, 183)' }}>可报名活动</p>
                                </Grid.Item>
                                <Grid.Item>
                                    <p style={{ fontSize: '0.22rem' }}>6</p>
                                    <br />
                                    <p style={{ fontSize: '0.15rem', color: 'rgb(183, 183, 183)' }}>已报名活动</p>
                                </Grid.Item>
                                <Grid.Item>
                                    <p style={{ fontSize: '0.22rem' }}>3</p>
                                    <br />
                                    <p style={{ fontSize: '0.15rem', color: 'rgb(183, 183, 183)' }}>自建活动</p>
                                </Grid.Item>
                            </Grid>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}
